<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NextGen</title>

  <link href="static/css/css2.css" rel="stylesheet">

  <!-- ==========favicon ============-->
  <link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">
  <!-- =========bootstrap ============-->
  <link rel="stylesheet" href="static/css/bootstrap.min.css">
  <!-- =========fontawesome ============-->
  <link rel="stylesheet" href="static/css/all.min.css">
  <!-- =========animate ============-->
  <link rel="stylesheet" href="static/css/animate.min.css">
  <!-- =========venobox ============-->
  <link rel="stylesheet" href="static/css/venobox.min.css">
  <!-- =========css================== -->
  <link rel="stylesheet" href="static/css/style.css">
  <!-- =========responsive======== -->
  <link rel="stylesheet" href="static/css/responsive.css">
</head>

<body>

  <!-- ================ start nav bar=========== -->
  <nav class="navbar navbar-expand-md main-menu">
    <div class="container">
      <a class="navbar-brand" href="index.html"><img src="static/picture/logo-10.png" alt=""></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="service.html">Service</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="service.html">Gallery</a>
          </li>
        
          <li class="nav-item">
            <a class="nav-link" href="">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="404.html">404</a>
          </li>
          <li class="nav-item">
            <button class="nav-link" data-bs-toggle="modal" data-bs-target="#searchModal">
              <i class="fa fa-search" aria-hidden="true"></i>
            </button>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  
  <!-- Search Modal -->
  <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="searchModalLabel">Search</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="#" method="GET">
            <div class="mb-3">
              <input type="text" class="form-control" name="query" placeholder="Type to search...">
            </div>
            <button type="submit" class="shadow__btn w-100 mt-3 mb-2">Search</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- ================end nav bar=========== -->
  <!-- start banner-section -->

  <section id="banner" class="cmn-banner" style="background: url(static/image/banner.png) no-repeat center/cover;">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="wow animate__animated animate__fadeInLeft banner-text">
            <h1>Contact Us</h1>
            <a href="index.html">Home |</a> <a class="active" href="about.html"> Contact</a><a href="#"></a>
          </div>
        </div>
        <div class="col-md-6"></div>
      </div>
    </div>

  </section>
  <!-- start banner-section -->

  <section id="rsvp-form">
    <div class="container">
     <div class="contact-form-inner">
      <div class="row">
        <div class="col-lg-6 offset-lg-3">
          <div class="rsvp-inner-form text-center">
            <div class="titlepage">

              <h2>Contact Us</h2>
            </div>
            <form id="table">
            <div class="row">
              <div class="col-lg-12">
                <input id="name" type="text" placeholder="Your Name*" class="form-control materialize-textarea" data-validation="text" data-content="*Name cannot be empty">
              </div>
              <div class="col-lg-6">
                <input id="email" type="text" data-validation="email" class="form-control materialize-textarea" placeholder="Your Email" data-content="*Email has a invalid format">
              </div>
              <div class="col-lg-6">
                <input data-validation="noempty" type="text" class="form-control" name="number" id="number" placeholder="Your Phone Number*" data-content="*Number Of Guest">
              </div>
            </div>
            
             
        
              <div class="form-group">
                <textarea data-validation="noempty" class="form-control materialize-textarea" placeholder="Comment" class="materialize-textarea" data-content="*Comment cannot be empty" rows="5"></textarea>
              </div>
              <div class="text-center">
                <div class="main-btn">

                  <button class="shadow__btn" type="submit">Submit</button></div>
                </div>
            </form>
          </div>
        </div>
      </div>
     </div>
    </div>
  </section>
  
  
  <!-- testimonial start -->
  <section id="testimonials" class="testimonials">
    <div class="container">
      <div class="row">
        <div class="col-md-5">
          <div class="wow animate__animated animate__fadeInLeft common-heading mb-5">
            <h4 class="pre-title">What Our Clients Say <span>About Us</span></h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sed, laudantium ullam, soluta quisquam
              aliquid, deserunt illo aliquam libero aspernatur placeat beatae quae? Culpa molestias consequuntur nemo
              ullam minus quasi!</p>
          </div>
        </div>
        <div class="wow animate__animated animate__fadeInRight col-md-7">
          <div class="slider-indicator" data-wow-delay=".2s">
            <img src="static/picture/testimonial-01.png" class="active" alt="img" data-id="0">
            <img src="static/picture/testimonial-03.png" alt="img" data-id="1">
            <img src="static/picture/testimonial-02.png" alt="img" data-id="2">
          </div>

          <div class="slider">
            <div class="slide active">
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti soluta asperiores magni
                voluptatem iste consequuntur reiciendis quas velit veritatis animi, ducimus iusto ad sint
                similique sapiente, suscipit ab, rerum voluptatum. Quaerat ad eveniet architecto, quidem
                tempora error magnam! At nisi qui ratione, tempora vel corporis sint exercitationem maxime
                minima velit!
              </p>
              <div class="client-info">
                <h3>Elisa</h3>
                <span>Founder at Zach</span>
              </div>
            </div>
            <div class="slide">
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti soluta asperiores magni
                voluptatem iste consequuntur reiciendis quas velit veritatis animi, ducimus iusto ad sint
                similique sapiente, suscipit ab, rerum voluptatum. Quaerat ad eveniet architecto, quidem
                tempora error magnam! At nisi qui ratione, tempora vel corporis sint exercitationem maxime
                minima velit!
              </p>
              <div class="client-info">
                <h3>Natasha</h3>
                <span>Founder at Welling</span>
              </div>
            </div>
            <div class="slide">
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti soluta asperiores magni
                voluptatem iste consequuntur reiciendis quas velit veritatis animi, ducimus iusto ad sint
                similique sapiente, suscipit ab, rerum voluptatum. Quaerat ad eveniet architecto, quidem
                tempora error magnam! At nisi qui ratione, tempora vel corporis sint exercitationem maxime
                minima velit!
              </p>
              <div class="client-info">
                <h3>Jack</h3>
                <span>Founder at Zim</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- testimonial end -->

  <!-- footer start -->
  <footer class="footer-section">
    <div class="container">
      <div class="wow animate__animated animate__fadeInUp footer-content pt-5 pb-5" data-wow-delay=".2s">
        <div class="row">
          <div class="col-lg-4 col-xl-4 col-lg-4 mb-50">
            <div class="footer-widget">
              <div class="footer-logo">
                <a class="navbar-brand" href="#"><img src="static/picture/logo-10.png" alt=""></a>
              </div>
              <div class="footer-text">
                <p>Lorem ipsum dolor sit amet, consec tetur adipisicing elit, sed do eiusmod tempor incididuntut consec
                  tetur adipisicing
                  elit,Lorem ipsum dolor sit amet.</p>
              </div>
              <div class="social-icon d-flex">
                <!-- <span>Follow us</span> -->
                <a href="#"><i class="fab fa-facebook-f facebook-bg"></i></a>
                <!-- github -->
                <a href="#"><i class="fab fa-github github-bg"></i></a>
                <!-- linkedin -->
                <a href="#"><i class="fab fa-linkedin-in linkedin-bg"></i></a>
                <!-- youtube -->
                <a href="#"><i class="fab fa-youtube youtube-bg"></i></a>

              </div>
            </div>
          </div>
          <div class="col-lg-4 col-xl-4 col-lg-4 col-md-6 mb-30">
            <div class="footer-widget">
              <div class="footer-widget-heading">
                <h3>Useful Links</h3>
              </div>
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Expert Team</a></li>
                <li><a href="#">Contact us</a></li>
                <li><a href="#">Latest News</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4 col-xl-4 col-lg-4 col-md-6 mb-50">
            <div class="footer-widget">
              <div class="footer-widget-heading">
                <h3>Subscribe</h3>
              </div>
              <div class="footer-text mb-25">
                <p>Don’t miss to subscribe to our new feeds, kindly fill the form below.</p>
              </div>
              <div class="subscribe-form">
                <form action="#">
                  <input type="text" placeholder="Email Address">
                  <button><i class="fab fa-telegram-plane"></i></button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="copyright-area">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 col-lg-6 text-center text-lg-left">
            <div class="copyright-text">
              <p>Copyright &copy; 2024.Company name All rights reserved.<a target="_blank" href="https://www.toymoban.com/htmlmoban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
            </div>
          </div>
          <div class="col-lg-6 col-lg-6 d-none d-lg-block text-right">
            <div class="footer-menu">
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Policy</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- footer section end -->

  <!-- btn_top_bottom part start -->
  <div class="btn_top_bottom">
    <i class="fa-solid fa-arrow-up-long">
    </i>
  </div>
  <!-- btn_top_bottom part end -->


  <!-- footer end -->


  <!-- =====================js-bootstrap==================================== -->
  <script src="static/js/sweetalert.min.js"></script>
  <script src="static/js/jquery-1.12.4.min.js"></script>
  <script src="static/js/bootstrap.min.js"></script>
  <script src="static/js/venobox.min.js"></script>
  <script src="static/js/validation.js"></script>
  <script src="static/js/wow.min.js"></script>
  <script src="static/js/jquery.counterup.min.js"></script>
  <script src="static/js/waypoints.min.js"></script>
  <script src="static/js/script.js"></script>
<script>
  $(document).ready(function () {
    $("#form").xvalidation({
      theme: "materialize"
    });
    $("#form").submit(function (evt) {
      evt.preventDefault();
      evt.stopPropagation();
      if ($("#form").data().xvalidation.methods.validate()) {
        swal("Submitted!", "Thank you!", "success");
      }
      return false;
    });
  });
  // book table
  $(document).ready(function () {
    $("#table").xvalidation({
      theme: "materialize"
    });
    $("#table").submit(function (evt) {
      evt.preventDefault();
      evt.stopPropagation();
      if ($("#table").data().xvalidation.methods.validate()) {
        swal("Submitted!", "PLEASE CHECK YOUR EMAIL!", "success");
      }
      return false;
    });
  });
</script>
</body>

</html>